<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card>
        <my-e-chart style="height: 400px;width: 700px" :option="hotBookCategoryOption" v-if="hotBookCategoryOption.series[0].data"></my-e-chart>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import MyEChart from "@/components/echart/MyEChart.vue";
import {reqGetBookCategoryBorrow} from '@/api/statistic'

let hotBookCategoryOption = ref( {
  title: {
    text: '热门图书分类',
    subtext: '数据来源于借阅记录统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '借阅数据',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

let getHotBookCategory = async () => {
  let res = await reqGetBookCategoryBorrow()
  hotBookCategoryOption.value.series[0].data = res.data
}

onMounted(()=>{
  getHotBookCategory()
})
</script>

<style scoped>

</style>
